<template>
    <div class="list">
      <div class="title">过滤组件</div>
      <div class="wrap">
        <div @dragstart="handleDragStart(item, $event)" draggable="true" v-for="item in filterList" :key="item.component" class="item">
          <a-icon :type="item.icon" /> {{item.label}}
        </div>
      </div>
      <div class="title">其他组件</div>
      <div class="wrap">
        <div @dragstart="handleDragStart(item, $event)" draggable="true" v-for="item in otherList" :key="item.component" class="item">
          <a-icon :type="item.icon" /> {{item.label}}
        </div>
      </div>

    </div>
</template>

<script >
import EventBus from "../../EventBus"
import getList from "../list"
import { mouseStatus } from "../../lib/const"
import { stringify } from "../../lib/utils"
import { getAllFilterComponentTypes } from "../../lib/filter"

export default {
  name: "Tool",
  data() {
    return {
      filterList: getList(getAllFilterComponentTypes()),
      otherList: getList(["other"]),
      activeName: "analysis"
    }
  },
  methods: {
    handleDragStart(data,event){
      // console.log(event);

      // 保留当前鼠标距离选中元素的偏移量
      const mouseOffset = {
        x: event.offsetX,
        y: event.offsetY
      }
      console.log(data)
      // 直接转换为json字符串,会出现function丢失的bug
      event.dataTransfer.setData("data", stringify({data, mouseOffset}))
      EventBus.$emit("mouseStatusChange", mouseStatus.ADD_DRAG)
    }
  },
  components: {
  }
}
</script>

<style lang="less" scoped>
  @import url("./index.less");
</style>
